import React,{Component, use, useEffect, useState} from "react";
import { Button, Modal } from 'antd';
import axios from "axios";
import { useNavigate } from "react-router-dom";
export default function Sou(){

const [ssvalue,setValue]=useState('')
const [sslist,setSlist]=useState([])
const [qh,setQh]=useState(1)

const Navget=useNavigate()

const getsslist=async()=>{
    await axios.get(`http://localhost:3000/jl`).then((res)=>{
        if(res.status==200){
            const pxlist=res.data.sort((a,b)=>b.id-a.id)
            setSlist(pxlist)
        }
    })
}

useEffect(()=>{
    getsslist()
},[])

const Sou=async()=>{
    await axios.post(`http://localhost:3000/jl`,{
       
        name:ssvalue

    })
    getsslist()
    setValue('')
    Navget(`/sp/${ssvalue}`)

    
}

const scjl=async(i)=>{
    await axios.delete(`http://localhost:3000/jl/${i.id}`)
    getsslist()
}

const qbsc=async()=>{
    for(const i of sslist){
        await axios.delete(`http://localhost:3000/jl/${i.id}`)
        getsslist()
    }
}

const qha=()=>{
    if(qh===1){
        setQh(0)
    }else{
        setQh(1)
    }
   
}
const tz=(i)=>{
  
         Navget(`/sp/${i.name}`)
  
     
}


return(
    <div>
        <div>
            <input placeholder="搜索"
             value={ssvalue}
              onChange={(e)=>{setValue(e.target.value)}}
               onKeyDown={(e)=>{if(e.key==='Enter'){Sou()}}}></input>
              
        </div>

    {
        qh===1?
        <>
         <div>
            <p>历史记录<button onClick={()=>{qbsc()}}>全部删除</button> <button onClick={()=>{qha()}}>切换</button></p>

                <div style={{display:'flex',flexWrap:'wrap'}}>
                    {
                sslist.slice(0,5).map((i)=>{
                    return(
                        <div style={{width:'20%'}}>
                            <p >
                                <button onClick={()=>{tz(i)}}>{i.name}<button onClick={()=>{scjl(i)}}>X</button> </button>
                            </p>
                                   
                            </div>
                      
                    )
                })
            }
                </div>
            
        </div>
        </>
        :
        <>
         <div>
            <p>历史记录<button onClick={()=>{qbsc()}}>全部删除</button> <button onClick={()=>{qha()}}>切换</button></p>

                <div style={{display:'flex',flexWrap:'wrap'}}>
                    {
                sslist.map((i)=>{
                    return(
                        <div style={{width:'20%'}}>
                            <p >
                                <button>{i.name}<button onClick={()=>{scjl(i)}}>X</button> </button>
                            </p>
                                   
                            </div>
                      
                    )
                })
            }
                </div>
            
        </div>
        </>
    }

       
    </div>
)
}

